<template>
	<page-frame logo="/static/images/class_title.png">
		<template #top>
			<view style="width: 158px;margin-left: 16px;">
				<u-search height="56rpx" :placeholder="`已录入 ${page.count} 门课`" :showAction="false" bgColor="#ffffff"
						v-model="page.params.keyWord" @search="search" @change="search" @clear="clear" @custom="search"></u-search>
			</view>
		</template>
		<template #sticky>
			<!-- <view class="u-flex u-flex-items-center">
				<view class="u-m-r-24" @click="changeSort">
					<up-icon space="8rpx" name="arrow-down-fill" :labelSize="14" size="10px" bold color="#000"
						labelColor="#000" labelPos="left" :label="menu[index].name"></up-icon>
				</view>
				<view class="_search">
					<view class="_right" @click="search">搜索</view>
					<u-search height="34px" :showAction="false" :placeholder="placeholder" bgColor="#ffffff"
						v-model="page.params.keyWord" @search="search" @change="search" @clear="clear"
						@custom="search"></u-search>
				</view>
			</view> -->
			<view class="u-flex u-flex-items-center u-flex-between ">
				<view class="scroll-box">
					<up-scroll-list :indicator="false">
						<block v-for="domain in courseDomainList" :key="domain.value">
							<field-btn :name="domain.name" :active="domain.value === page.params.domainParentId"
								@search="fieldBtnClick(domain)" />
						</block>
					</up-scroll-list>
				</view>
				<view class="f-s-26 iconfont text-right" @click="moreBtnClick">
					&#xe603;
				</view>
			</view>
		</template>
		<template #area>
			<block v-if="page.list.length == 0">
				<empty-data text="暂无数据" />
			</block>
			<block v-else>
				<block v-if="index === 0">
					<!-- <main-class v-for="course in page.list" :key="course.id" :course="course" /> -->
					<class-main v-for="course in page.list" :key="course.id" :course="course" />
				</block>
				<block v-if="index === 1">
					<open-class v-for="course in page.list" :key="course.id" :course="course" />
					<!-- <class-open v-for="course in page.list" :key="course.id" :course="course" /> -->
				</block>
				<!-- <block v-if="index === 2">
					<view class="class-list-grid">
						<class-card v-for="course in page.list" :key="course.id" :course="course" />
					</view>
				</block> -->
			</block>

			<view class="u-p-t-12" v-if="page.total > page.params.pageSize">
				<u-loadmore :fontSize="12" line :status="page.loadStatus" nomoreText="更多精彩，敬请关注" />
			</view>
		</template>
	</page-frame>
	<u-popup :show="popShow" :safeAreaInsetBottom="false" :round="24">
		<view class="pop-box">
			<view @click="popShow = false" class="close-icon">
				<up-icon name="close-circle-fill" color="#ccc" size="22"></up-icon>
			</view>
			<view class="text-center f-w-b f-s-16">{{ popData.name }}</view>
			<view class="box-area">
				<block v-if="popData.type == 'F'">
					<view v-for="(domain,index) in courseDomainList" :key="index" class="item-tag"
						:class="{ 'active' : domain.value == page.params.domainParentId }"
						@click="selectTag(domain,'domainParentId')">
						{{ domain.name }}
					</view>
				</block>
				<block v-if="popData.type == 'M'">
					<view v-for="_menu in menu" :key="_menu.index" class="item-tag u-line-1"
						:class="{ 'active' : _menu.index == index }" @click="selectClassSort(_menu)">
						{{ _menu.name }}
					</view>
				</block>
			</view>
		</view>
	</u-popup>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import MainClass from '@/components/main_class_index.vue'
	import OpenClass from '@/components/class-open-index.vue';
	import PageFrame from '@/components/PageFrame.vue';
	import FieldBtn from '@/components/FieldBtn.vue';
	import EmptyData from '@/components/EmptyData.vue';
	import config from '@/config.js'
	import classMain from "@/components/class-main-index.vue"
	import classCard from "@/components/class-card.vue"
	import classOpen from "@/components/class-open-index.vue"

	import {
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import {
		list
	} from '@/api/class/online'

	import {
		openList
	} from '@/api/class/open'

	import {
		mainList
	} from '@/api/class/main'
	import {
		getParentFieldList,
		getCityList
	} from '@/api/config'
	import {
		domainList
	} from '../api/domain';
	const popShow = ref(false)
	const fieldList = ref([])
	// 专业领域的数据
	const courseDomainList = ref([])
	const cityList = ref([])
	const index = ref(0)
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	// 弹窗的信息
	const popData = ref({})
	const menu = ref([{
		name: '内训课',
		index: 0
	}, {
		name: '公开课',
		index: 1
	}])
	let page = ref({
		list: [],
		params: {
			keyWord: '',
			pageNum: 1,
			pageSize: 8,
			domainParentId: '',
		},
		loadStatus: 'nomore',
		// 当前页
		currentPage: 1,
		// 总页数
		pages: 1,
		// 查询到的总条数
		total: 0,
		// 总数
		count: 0
	})
	getList()
	// parentField()
	getDomainList()


	/**
	 * 查询方法
	 */
	function search() {
		page.value.params.pageNum = 1
		uni.pageScrollTo({
			scrollTop: 1, //距离页面顶部的距离
			duration: 0 // 滚动动画时长
		})
		getList()
	}

	/**
	 * 获取在线课程列表
	 */
	function getList() {
		page.value.loadStatus = "loading"
		// 内训课程
		if (index.value === 0) {
			mainList(page.value.params).then(resp => {
				hadlerPage(resp)
			})
			return
		}
		// 在线课程
		// if (index.value === 2) {
		// 	list({
		// 		...page.value.params,
		// 		type: 'C'
		// 	}).then(resp => {
		// 		hadlerPage(resp)
		// 	})
		// 	return
		// }
		// 公开课
		if (index.value === 1) {
			openList(page.value.params).then(resp => {
				hadlerPage(resp)
			})
			return
		}
	}

	/**
	 * @param {Object} resp
	 * 处理数据
	 */
	function hadlerPage(resp) {
		const total = resp.total || 0
		if (page.value.count === 0) {
			page.value.count = total
		}
		if (resp.currentPage === 1) {
			page.value.list = []
		}
		page.value.list = [...page.value.list, ...resp.rows].map(e => {
			return {
				...e,
				talkNum: uni.$u.random(6, 30)
			}
		})
		page.value.currentPage = resp.currentPage
		page.value.pages = resp.pages
		page.value.total = resp.total
		popShow.value = false
		if (resp.total === 0 || resp.currentPage == resp.pages) {
			page.value.loadStatus = "nomore"
			return
		}
		page.value.loadStatus = "loadmore"
	}

	/**
	 * 上拉加载更多
	 */
	onReachBottom(() => {
		if (page.value.currentPage == page.value.pages) {
			page.value.loadStatus = 'nomore'
			return
		}
		page.value.params.pageNum++
		getList()
	})

	const fieldBtnClick = (e) => {
		page.value.params.domainParentId = e.value
		search()
	}

	/**
	 * 选择不同的课程
	 */
	const changeSort = () => {
		popData.value = {
			name: '课程选择',
			type: 'M'
		}
		popShow.value = true
	}
	const selectClassSort = (e) => {
		index.value = e.index
		reset()
	}

	/**
	 * 更多分类
	 */
	const moreBtnClick = () => {
		popData.value = {
			name: '更多分类',
			type: 'F'
		}
		popShow.value = true
	}

	/**
	 * 父级领域
	 */
	function parentField() {
		getParentFieldList('K').then(resp => {
			const list = resp.data.map(f => {
				return {
					value: f.id,
					name: f.name
				}
			})
			fieldList.value = [{
					value: '',
					name: '全部领域'
				},
				...list,
			]
		})
	}

	/**
	 * 获取专业领域数据
	 */
	function getDomainList() {
		domainList("L").then(resp => {
			courseDomainList.value = [{
				name: '全部领域',
				value: ''
			}].concat(resp.data.map(e => {
				return {
					name: e.name,
					value: e.id
				}
			}))
		})
	}


	function selectTag({
		value,
		name
	}, key) {
		page.value.params[key] = value
		popShow.value = false
		search()
	}


	/**
	 * 清除搜索条件
	 */
	function clear() {
		page.value.params.keyWord = ''
		uni.pageScrollTo({
			scrollTop: 1, //距离页面顶部的距离
			duration: 0 // 滚动动画时长
		})
		search()
	}
	/**
	 * 重置搜索条件
	 */
	function reset() {
		page.value.params.domainParentId = ''
		search()
	}
	onShareAppMessage(() => {
		return {
			title: '尧君智库-' + menu.value[index.value].name,
		}
	})
	onShareTimeline(() => {
		return {
			title: '尧君智库-课程'
		}
	})
</script>
<style lang="scss" scoped>
	::v-deep .u-scroll-list {
		padding-bottom: 0rpx !important;
	}

	._search {
		position: relative;
		flex: 1;

		._right {
			position: absolute;
			right: 20px;
			font-size: 14px;
			line-height: 68rpx;
			color: #2080f7;
			z-index: 9;
			font-weight: bolder;
		}
	}

	.scroll-box {
		width: calc(100vw - 140rpx);
		max-width: calc(100vw - 140rpx);
	}


	.class {
		padding: 0 12px 20px 12px;

		.sticky-box {
			background-color: #f4f4f4;
			padding-bottom: 5px;

			.top {
				padding: 15px 0 0;
			}
		}
	}

	.pop-box {
		position: relative;
		padding: 15px 12px;

		.close-icon {
			position: absolute;
			top: 16px;
			right: 18px;
		}

		.box-area {
			max-height: 300px;
			overflow-y: scroll;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 12px;
			margin: 16px 0;

			.item-tag {
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 74rpx;
				line-height: 74rpx;
				background-color: #F4F6F8;
				color: #686A6B;
				font-size: 28rpx;
				border-radius: 8rpx;
			}

			.active {
				background: linear-gradient(to right, #5E9EE1, #457EE6);
				color: #fff;
			}
		}
	}

	.seach-btn {
		border-radius: 8px;
		background-color: #eee;
		padding: 6px 8px;
	}
	
	::v-deep .u-search__content__input {
		font-size: 12px !important;
	}
</style>